<template>
    <div>
        <Header />
        <div class="indexContainer">
            <div class="mapNav">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>购物车</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="shopCart">
                <h3 class="cartTitle">全部商品</h3>
                <div class="shopTop">
                    <div class="shopBtn">
                        <el-checkbox v-if="shopData.length !== 0" v-model="isSelectAll" @change="selectAll">全选</el-checkbox>
                    </div>
                    <p class="tableOne">商品简介</p>
                    <p class="tableTwo">上架时间</p>
                    <p class="tableThree">价格</p>
                    <p class="tableFour">操作</p>
                </div>
                <!-- 列表内容 -->
                <div class="shopList" v-loading="loading">
                    <el-empty :image-size="100" v-if="shopData.length == 0" description="暂无数据"></el-empty>
                    <ul>
                        <li v-for="item in shopData" :key="item.id">
                            <div class="listBtn">
                                <el-checkbox v-model="item.checked" @change="changeItem">
                                    <span style="width:28px;display: inline-block;"></span>
                                </el-checkbox>
                            </div>
                            <div class="listOne">
                                <div class="goodInfo">
                                    <img class="goodImg" :src="item.productModel.thumbnail" alt="">
                                    <div class="goodDesc">
                                        <h3 class="singleLine" @click="handleProDetail(item.productModel.id)">{{ item.productModel.title
                                        }}</h3>
                                        <p class="moreLineThree">{{ item.productModel.description }}
                                        </p>
                                    </div>
                                    <div class="goodType">
                                        <div class="typeItem">
                                            <p>{{ item.productModel.source == 1 ? '内部产品' : '外部产品' }}</p>
                                            <p>{{ item.productModel.categoryName }}</p>
                                        </div>
                                        <p class="supplierText singleLine">供应商：{{ item.productModel.supplier }}</p>
                                    </div>
                                </div>
                            </div>
                            <p class="listTwo">{{ item.shelfTime }}</p>
                            <p class="listThree">{{ item.consumName ? item.consumName : 0 }}</p>
                            <p class="listFour">
                                <el-button type="text" size="medium" @click="handleChange(item)">修改</el-button>
                                <el-button type="text" size="medium" @click="handleDelete(item.id)">删除</el-button>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="shopBottom" v-if="shopData.length !== 0">
                    <div class="bottomLeft">
                        <el-checkbox v-model="isSelectAll" @change="selectAll">全选</el-checkbox>
                    </div>
                    <p @click="handleBatch" class="leftText">删除选中商品</p>
                    <div class="bottomRight">
                        <p class="goodNum">已选择{{ selectTotal }}件商品</p>
                        <!-- <p class="goodPrice">总价：0</p> -->
                        <p class="goodBtn" @click="handleApply">申请共享</p>
                    </div>
                </div>

            </div>
        </div>
        <Footer />
        <!-- 选择积分 -->
        <IntegralDialog @getShop="getShop" ref="detailContent" />
    </div>
</template>
<script>
import Header from "@/components/home/header/header";
import Footer from "@/components/home/footer/footer";
import { shopAll, shopDelete } from "@/request/api/shopCart"
import { dateFormat } from "@/utils/dateFormat.js"
import IntegralDialog from "./integralDialog.vue"
export default {
    components: {
        Header,
        Footer,
        IntegralDialog
    },
    data() {
        return {
            params: {
                userId: '',//用户id
            },
            total: 0,
            loading: true,
            shopData: [],
            selectTotal: 0,//选中的值
        }
    },
    mounted() {
    },
    created() {
        this.getShop()
    },
    computed: {
        //检测是否全选
        // eslint-disable-next-line vue/return-in-computed-property
        isSelectAll() {
            if (this.shopData.length !== 0) {
                // 如果shopData中每一条数据的checked都为true，返回true，否则返回false;
                return this.shopData.every(function (val) { return val.checked });
            }
        },
    },
    methods: {
        // 获取购物车列表
        getShop() {
            var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            this.params.userId = userInfo.id
            shopAll(this.params).then(res => {
                this.loading = false
                if (res.data.code == 1) {
                    let dataList = res.data.data.totalList
                    dataList.forEach(item => {
                        item.checked = false
                        item.shelfTime = dateFormat(item.productModel.shelfTime)
                    })
                    this.shopData = dataList
                }
            })
        },
        // 查看金额及积分信息
        handleChange(info) {
            this.$refs.detailContent.open(info)
        },
        // 单个删除
        handleDelete(id) {
            let params = 'id=' + id
            this.deleteResult(params)
        },
        // 删除接口
        deleteResult(params) {
            this.$confirm("确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                shopDelete(params).then((res) => {
                    if (res.data.code === 1) {
                        this.$message({
                            message: '删除成功！',
                            type: "success",
                        });
                        this.getShop();
                        // this.$refs.tableRef.clearSelection();
                        this.bus.$emit("shopCount");//删除成功后，重新调用购物车数量接口
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            });
        },
        // 点击全选/取消全选
        selectAll(val) {
            if (val == true) {//全选时，设置选中状态
                this.shopData.forEach(item => {
                    item.checked = true
                })
                this.selectTotal = this.shopData.length
            } else {//取消全选，取消选中状态
                this.shopData.forEach(item => {
                    item.checked = false
                })
                this.selectTotal = 0
            }
        },
        // 批量删除，判断数组中是否有选中的
        handleBatch() {
            const selectedItems = this.shopData.filter((item) => item.checked);
            if (selectedItems.length > 0) {//已选中的产品，可执行删除操作
                // 进行删除操作
                let ids = selectedItems.map(item => item.id)
                // 将选中的结果拼接成这种格式：id=106&id=105
                let result = ids.map(id => `id=${id}`).join('&');
                this.deleteResult(result)
            } else {
                this.$message({
                    message: '请选择需要删除的产品！',
                    type: 'warning'
                });
            }
        },
        // 选择单个计算选中的个数
        changeItem() {
            const selectedItems = this.shopData.filter((item) => item.checked);
            this.selectTotal = selectedItems.length
        },
        // 申请共享
        handleApply() {
            const selectedItems = this.shopData.filter((item) => item.checked);
            if (selectedItems.length > 0) {//已选中的产品，可执行删除操作
                window.sessionStorage.setItem("dataArray", JSON.stringify(selectedItems));
                this.$router.push("/applyShare");
            } else {
                this.$message({
                    message: '请选择产品！',
                    type: 'warning'
                });
            }
        },
        // 产品详情
        handleProDetail(id) {
            this.$router.push({
                name: "ApplicationProductsDetail",
                query: {
                    id,
                    userId: this.params.userId
                }
            });
        }
    }
}
</script>
<style lang="less" scoped>
@import "./shopCart.less";
</style>


